<template>
    <div>
        <center>
            <h2>id:{{id}}</h2>
            <h2>state:{{state}}</h2>
            <h2>country:{{country}}</h2>
        </center>
        <div id="myChart" :style="{width:'800px',height:'600px'}"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    name: "StateChart",
    mounted() {
        let _this = this;
        let chartDom = document.getElementById('myChart');
        let myChart = echarts.init(chartDom);
        let option;
        axios.get('http://localhost:8081/data/statechart/'+this.$route.params.id).then(function (response) {
            _this.id = response.data.id;
            _this.state = response.data.state;
            _this.country = response.data.country;
            _this.xData = response.data.dateList;
            _this.yData = response.data.numList;
            console.log(_this.xData);
            console.log(_this.yData);
            option = {
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [],
                    type: 'line',
                    smooth: true
                }]
            };
            option.xAxis.data = _this.xData;
            option.series[0].data = _this.yData;
            option && myChart.setOption(option);
        });
    },
    data() {
        return {
            id:0,
            state:'',
            country:'',
            xData:[],
            yData:[]
        }
    }
}
</script>

<style scoped>

</style>
